<template>
	<div>
		<div class="shop-container">
			<div class="shop-classify-list">
				<div :class="classify.selected ? 'shop-classify-item shop-classify-item-active' : 'shop-classify-item'" v-for="(classify, index) in classify" :key="index" @click="to_classify(index)">
					{{ classify.name }}
				</div>
			</div>
			<div class="shop-goods-items">
				<div v-if="goods.list.length > 0">
					<div class="shop-goods-item" v-for="(item, index) in goods.list" :key="index" @click="details(index)">
						<div class="shop-goods-item-image">
							<img :src="item.image + '!100'" />
						</div>
						<div class="shop-goods-item-content">
							<div class="shop-goods-item-name">{{ item.name }}</div>
							<div class="shop-goods-item-price"><small>￥</small> {{ item.price }}</div>
						</div>
					</div>
				</div>
				<div class="shop-goods-item" v-else>
					<div class="shop-goods-item-empty">
						<div>
							<img src="/images/default-status/cart_empty.png" />
							<p>暂时没有商品</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<GoodsDetails v-bind.sync="goods_details" />
	</div>
</template>

<script>
	import GoodsDetails from './Public/GoodsDetails.vue'
	
	export default {
		components: {
			GoodsDetails
		},
		data(){
			return {
				classify: [],
				goods: {
					data_loaded: false,
					current_classify: null,
					list: [],
					page: 1,
					offset: 10,
					has_next_page: true
				},
				selected_index: -1,
				loading_next_page: false,
				goods_details: {
					show: false,
					id: null
				}
			}
		},
		watch: {
			selected_index(val) {
				this.select_classify(val)
			}
		},
		mounted() {
			this.fetch_classify()
			
			this.$nextTick(() => {
				const el = document.querySelector('.shop-goods-items');
				const offsetHeight = el.offsetHeight;
				el.onscroll = () => {
					const scrollTop = el.scrollTop;
					const scrollHeight = el.scrollHeight;
					if ((offsetHeight + scrollTop) - scrollHeight >= -1) {
						if(!this.loading_next_page && this.goods.data_loaded && this.goods.has_next_page)
							this.fetch_goods(this.goods.current_classify)
					}
				};
			});
		},
		methods: {
			fetch_classify() {
				this.$axios.get('/goods/classify_list').then(resp => {
					if(resp.ret == 0){
						this.classify = resp.data
						
						if(resp.data != null && this.classify.length > 0) this.to_classify(0)
					}
				})
			},
			fetch_goods(classify_id){
				this.loading_next_page = true
				if(classify_id != this.goods.current_classify) {
					this.goods = {
						data_loaded: false,
						current_classify: classify_id,
						list: [],
						page: 1,
						has_next_page: true,
						offset: this.goods.offset
					}
				}
				
				let params = {
					cid: this.goods.current_classify,
					page: this.goods.page++,
					offset: this.goods.offset
				}
				
				this.$axios.get('/goods/goods_list', {params: params}).then(resp => {
					if(resp.ret == 0) {
						if(resp.data == null || resp.data.length == 0) {
							this.goods.has_next_page = false
						} else {
							this.goods.list = this.goods.list.concat(resp.data)
						}
						
						this.loading_next_page = false
						this.goods.data_loaded = true
						
						if(resp.data.length > 0)
							this.$nextTick(() => {
								if(document.querySelector('.shop-goods-items>div').scrollHeight < document.querySelector('.shop-goods-items').offsetHeight) {
									this.fetch_goods(this.goods.current_classify)
								}
							})
					}
				})
			},
			to_classify(index) {
				this.selected_index = index
				this.fetch_goods(this.classify[index].id)
			},
			select_classify(index) {
				let i = 0
				this.classify.forEach(classify => {
					if(i == index) {
						classify.selected = true
					} else classify.selected = false
					
					i++
				})
				
				this.$forceUpdate()
			},
			details(index) {
				this.goods_details.id = this.goods.list[index].id
				this.goods_details.show = true
			}
		}
	}
</script>

<style>
	.shop-container {
		display: flex;
		position: relative;
		width: 100%;
		height: calc(100vh - 60px);
	}
	.shop-classify-list {
		width: 7.5rem;
		height: 100%;
		overflow-y: auto;
	}
	.shop-classify-item {
		height: 3rem;
		width: 100%;
		line-height: 3rem;
		text-align: center;
		color: #666;
	}
	.shop-classify-item-active {
		background-color: #fff;
		color: #333;
	}
	.shop-goods-items {
		height: 100%;
		width: calc(100% - 7.5rem);
		background-color: #fff;
		padding: 0.9375rem;
		overflow-y: auto;
	}
	.shop-goods-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		margin-bottom: 0.9375rem;
		user-select: none;
		cursor: pointer;
	}
	.shop-goods-item-empty {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0 auto;
		height: calc(100vh - 60px - 1.875rem);
		user-select: none;
	}
	.shop-goods-item-empty p {
		text-align: center;
		color: rgb(181, 191, 198);
	}
	.shop-goods-item-image {
		margin-right: 0.625rem;
	}
	.shop-goods-item-image, .shop-goods-item-image img {
		width: 6.25rem;
		height: 6.25rem;
	}
	
	.shop-goods-item-content {
		
	}
	.shop-goods-item-name {
		font-size: 1.25rem;
	}
	.shop-goods-item-price {
		margin-top: 0.625rem;
		font-size: 1.125rem;
		color: rgb(255, 78, 47);
	}
</style>
